<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<span mat-dialog-title class="title">{{ isUpdateMode ? 'Update the API' : 'Import an API' }}</span>

<mat-dialog-content class="content">
  <mat-tab-group dynamicHeight mat-stretch-tabs (selectedTabChange)="onSelectedTab($event)">
    <!-- Import file -->
    <mat-tab [label]="tabLabels.UploadFile">
      <div class="content__file-tab">
        <div class="content__file-tab__file">
          <gio-form-file-picker accept=".yml,.yaml,.json,.wsdl,.xml" [ngModel]="filePickerValue" (ngModelChange)="onImportFile($event)">
            <gio-form-file-picker-add-button class="content__file-tab__file__add-btn">
              <div class="content__file-tab__file__add-btn__wrapper">
                <p class="mat-body-strong">
                  Drag and drop a file to upload it. <br />
                  Alternatively, click here to choose a file.
                </p>
                <p>
                  Supported file formats: yml, yaml, json, wsdl, xml.<br />
                  Supported API Definition: V2, V4.
                </p>
              </div>
            </gio-form-file-picker-add-button>
          </gio-form-file-picker>
        </div>
        <div *ngIf="importFile && importType !== 'GRAVITEE' && importType !== 'MAPI_V2'" class="content__file-tab__config">
          <ng-container *ngTemplateOutlet="configs"></ng-container>
        </div>
      </div>
    </mat-tab>
    <!-- Swagger / OpenAPI link -->
    <mat-tab [label]="tabLabels.SwaggerOpenAPI">
      <div class="content__url-tab">
        <mat-form-field class="content__url-tab__field">
          <mat-label>Swagger descriptor URL</mat-label>
          <input matInput type="url" [formControl]="descriptorUrlForm" required />
          <mat-error *ngIf="descriptorUrlForm?.hasError('required')">URL is required.</mat-error>
        </mat-form-field>

        <div class="content__url-tab__config">
          <ng-container *ngTemplateOutlet="configs"></ng-container>
        </div>
      </div>
    </mat-tab>
    <!-- API definition link -->
    <mat-tab [label]="tabLabels.ApiDefinition">
      <div class="content__url-tab">
        <mat-form-field class="content__url-tab__field">
          <mat-label>Api definition URL</mat-label>
          <input matInput type="url" [formControl]="descriptorUrlForm" required />
          <mat-error *ngIf="descriptorUrlForm?.hasError('required')">URL is required.</mat-error>
        </mat-form-field>
      </div>
    </mat-tab>
    <!-- API definition link -->
    <mat-tab [label]="tabLabels.WSDL">
      <div class="content__url-tab">
        <mat-form-field class="content__url-tab__field">
          <mat-label>WSDL descriptor URL</mat-label>
          <input matInput type="url" [formControl]="descriptorUrlForm" required />
          <mat-error *ngIf="descriptorUrlForm?.hasError('required')">URL is required.</mat-error>
        </mat-form-field>

        <div class="content__url-tab__config">
          <ng-container *ngTemplateOutlet="configs"></ng-container>
        </div>
      </div>
    </mat-tab>
  </mat-tab-group>

  <ng-template #configs>
    <div *ngIf="configsForm && importType !== 'GRAVITEE'" class="configs" [formGroup]="configsForm">
      <h4>Configuration imported from the {{ importType === 'WSDL' ? 'WSDL' : 'swagger' }} descriptor</h4>

      <div class="configs__checkbox">
        <mat-checkbox formControlName="importDocumentation">
          Create documentation
          <div class="configs__checkbox__warn">
            This will overwrite documentation if there is only one existing, or create it if it does not exist yet.
          </div>
        </mat-checkbox>
      </div>

      <div class="configs__checkbox">
        <mat-checkbox formControlName="importPathMapping">
          Create the path mapping for analytics
          <div class="configs__checkbox__warn">This will overwrite all the path-mappings.</div>
        </mat-checkbox>
      </div>

      <div class="configs__checkbox">
        <mat-checkbox formControlName="importPolicyPaths">
          Create flows on paths
          <div class="configs__checkbox__warn">This will overwrite all the policies.</div>
        </mat-checkbox>
      </div>

      <div *ngFor="let policy of policies" class="configs__checkbox policies-section" formGroupName="importPolicies">
        <mat-checkbox [formControlName]="policy.id">
          Apply {{ policy.name }} policy
          <div class="configs__checkbox__warn">This will overwrite all the existing policy.</div>
        </mat-checkbox>
      </div>
    </div>
  </ng-template>
</mat-dialog-content>

<mat-dialog-actions align="end" class="actions">
  <button class="confirm-dialog__cancel-button" mat-flat-button [mat-dialog-close]="false">Cancel</button>
  <button
    class="confirm-dialog__confirm-button"
    color="primary"
    mat-raised-button
    data-testid="confirm-dialog"
    [disabled]="!isImportValid"
    (click)="onImport()"
  >
    Import
  </button>
</mat-dialog-actions>
